<template>
	<div class="margin-bottom-xxl">
		<div class="cursor" @click="slicingDetails">
			<router-link :to="{ name: 'SlicingDetails' }">
				<div class="flex align-center">
					<span class="text-green2">铸流{{sketchMindex + 1}}（0.53*0.41）</span>
					<el-icon color="#35D9D9"><ArrowRight /></el-icon>
				</div>
				
			</router-link>
		</div>

		<div class="margin-top">
			<div class="flex-between text-white">
				<span>结晶器</span>
				<div class="flex">
					<div class="flex align-center">
						<el-icon size="20"><CaretBottom/></el-icon> 火切机
					</div>
					<div style="margin-left: 150px;">
						铸坯长度：0.0
					</div>
				</div>
			</div>

			<div class="parallelogram-war margin-top">
				<!-- 上方平行四边形 -->
				<div class="parallelogram-top parallelogram">
					<!-- 8等分 -->
					<template v-for="(item, index) in 8" :key="index">
						<div class="divider-box divider-top-box parallelogram" :style="`left: calc(${paralItemWidth * index}% + 2px)`" v-if="index !== 0"></div>
					</template>
					
					<!-- 实时切分 -->
					<template v-for="(item, index) in qiefenList" :key="index">
						<div class="divider-box divider-top-box2 parallelogram cursor" :style="`left: calc(${item}% + 2px) `" @click="eventListPopup(item)"></div>
					</template>
				</div>

				<!-- 下方长方形 -->
				<div class="parallelogram-mid" id="parallelogram-mid">
					<!-- 8等分 -->
					<template v-for="(item, index) in 8" :key="index">
						<div class="divider-box" :style="`left: ${paralItemWidth * index}%`" v-if="index !== 0"></div>
					</template>
					
					<!-- 实时切分 -->
					<template v-for="(item, index) in qiefenList" :key="index">
						<div class="divider-box divider-box2 cursor" :style="`left: ${item}%`" @click="eventListPopup(item)"></div>
					</template>
				</div>
			</div>
			
			<!-- 刻度 -->
			<div class="flex-between align-start text-white">
				<template v-for="(item, index) in scale" :key="index">
					<div class="scale-item" :class="`${index%5 == 0 ? 'scale-item-l' : ''}`">
						<span v-if="index%10 == 0" class="scale-span" :class="index / 10 > 10 ? 'scale-span2' : ''">{{index / 10}}</span>
					</div>
				</template>
			</div>
			
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	
	const emit = defineEmits(['eventListClick']);
	
	const props = defineProps({
		sketchMindex: {
			type: Number,
			default: 0
		}
	})
	
	const qiefenList = ref([10, 20, 40, 58, 80])	//实时切割数据
	
	const scale = ref(421)	//总长度
	
	const paralItemWidth = ref(100 / 8)
	
	const eventListPopup = (item) => {
		emit('eventListClick', item)
	}
	
	const slicingDetails = () => {
		
	}
</script>

<style lang="scss" scoped>
	.parallelogram {
		transform: skewX(-30deg);
	}

	.parallelogram-war {
		position: relative;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;

		&::after {
			height: 27px;
			width: 221px;
			position: absolute;
			top: 0;
			right: -12px;
			background-image: url('@/assets/images/icon/slicing-bg.png');
			background-repeat: no-repeat;
			content: '';
			z-index: 1;
		}

		.parallelogram-top {
			position: relative;
			height: 7px;
			background-color: #67C7FE;
			left: 2px;
			z-index: 2;
		}

		.parallelogram-mid {
			position: relative;
			height: 20px;
			background-color: #139AFE;
			z-index: 2;
		}

		.divider-box {
			width: 2px;
			height: 20px;
			position: absolute;
			top: 0;
			background-color: #222;
		}

		.divider-top-box {
			height: 7px;
			background-color: #222;
		}
		
		.divider-box2{
			width: 6px;
			background-color: #f4a307;
		}
		
		.divider-top-box2 {
			height: 7px;
			width: 6px;
			background-color: #f4a307;
		}
	}
	
	.scale-item{
		position: relative;
		height: 5px;
		border-left: 1px solid #fff;
	}
	
	.scale-item-l{
		height: 10px;
	}
	.scale-span{
		position: absolute;
		left: -5px;
		top: 12px;
	}
	.scale-span2{
		left: -9px;
	}
</style>